<template>
    <div id="search">
        <header>
            <router-link to="/">
                <i class="iconfont goBack">&#xe600;</i>
            </router-link>
            <form>
                <i class="iconfont">&#xe660;</i>
                <input type="search" placeholder="请输入商家或商品名称">
            </form>
            <span class="search-btn">搜索</span>
        </header>
        <h2>热门搜索</h2>
        <div class="search-inner">
            <a class="item" :key="index" v-for="(item, index) in hot_search">{{item.word}}</a>
        </div>
        <div class="clear"></div>
    </div>
</template>

<script>
import axios from 'axios'
import Router from 'vue-router'
export default {
    name: 'search',
    data() {
        return {
            hot_search: []
        }
    },
    created () {    //单页面控制body
        document.documentElement.style.minHeight = '100%'
        document.documentElement.style.backgroundColor = '#efefef'
    },
    mounted() {
        var that = this
        axios.get('http://localhost:3000/hot_search', {
            params: {
                latitude: 22.54286,
                longitude: 114.059563
            }
        }).then(function (res) {
            that.hot_search = res.data
        }).catch(function (err) {
            console.log(err)
        })
    },
    beforeDestroy () {  //销毁前移除,否则会影响其他组件
        document.documentElement.style.minHeight = ''
        document.documentElement.style.backgroundColor = ''
    }
}
</script>

<style lang="scss" scoped>
@import '../../static/px2rem.scss';
#search {
    width: 100%;
    height: 100%;
    background: white;
    header {
        width: 100%;
        height: px2rem(44);
        display: flex;
        a {
            height: 100%;
            line-height: px2rem(44);
            text-align: center;
            width: px2rem(37);
            .goBack {
                font-size: px2rem(22);
                font-weight: bold;
                color: #333;
            }
        }
        form {
            width: 71%;
            height: px2rem(30);
            margin-top: px2rem(7);
            background: #f2f2f2;
            padding: px2rem(5) 0;
            i {
                color: #999;
                font-size: px2rem(16);
                float: left;
                margin: px2rem(3) 0 0 px2rem(6);
            }
            input {
                float: right;
                height: px2rem(20);
                width: 90%;
                border: none;
                background: #f2f2f2;
                font-size: px2rem(14);
                outline: none;
            }
        }
        .search-btn {
            width: px2rem(50);
            height: px2rem(30);
            line-height: px2rem(30);
            font-size: px2rem(14);
            color: #333;
            text-align: center;
            background: #FFD161;
            border-radius: px2rem(2);
            margin: px2rem(7) 0 0 px2rem(10);
        }
    }
    h2 {
        width: 96%;
        height: px2rem(35);
        border-bottom: px2rem(1) solid #E4E4E4;
        line-height: px2rem(35);
        color: #656565;
        font-size: px2rem(14);
        font-weight: normal;
        margin-left: 4%;
    }
    .search-inner {
        width: 96%;
        margin-left: 4%;
        padding: px2rem(8) 0;
        min-height: px2rem(62);
        float: right;
        .item {
            float: left;
            max-width: px2rem(166);
            min-width: px2rem(52);
            height: px2rem(28);
            line-height: px2rem(28);
            margin: px2rem(8) px2rem(5);
            padding: 0 px2rem(15);
            box-sizing: border-box;
            border-radius: px2rem(2);
            border: px2rem(1) solid #ccc;
            color: #2f2f2f;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            text-align: center;
            font-size: px2rem(13);
        }
    }
    .clear {
        clear: both;
    }
}
</style>
